<template>
	<div class="magazine-lists-container">
    <!-- <div class="fulltext j-fulltext" v-html="description"></div> -->
    <editor :tplItemData="{modulePadding:0,fulltext:description}" v-if="description"></editor>
    <div class="magazine-lists" v-if="magazineListInit.length>0">
      <div class="search-container">
        <div class="search-wrapper">
          <div class="icon miniprogram" @click="searchList">
            <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
            <!-- <svg-icon icon-class="icon_search" class="icon_search" /> -->
          </div>
          <input @confirm="searchList" v-model="keyword" type="text" placeholder="专题搜索：请输入专题名称" />
        </div>
      </div>
      <van-list v-if="magazineList.length>0" v-model="list.loading"
                      class="special-list"
                      :finished="list.finished"
                      :error.sync="list.error"
                      error-text="请求失败，点击重新加载"
                      finished-text=""
                      @load="onLoad">
        <div v-for="(item,index) in magazineList" :key="index" class="list-item clearfix">
          <img :src="item.view_pic || defaultImg" />
          <a href="javascript:;" @click="openLink(item.link)" class="title">{{item.title}}</a>
        </div>
      </van-list>
      <div class="list-empty" v-else>查询不到相关数据</div>
    </div>

    <van-list v-model="diyList.loading"
                      :finished="diyList.finished"
                      :error.sync="diyList.error"
                      error-text="请求失败，点击重新加载"
                      finished-text=""
                      @load="onLoadDiy">
      <diy-tpl :tplData="magazineListDiy"></diy-tpl>
    </van-list>

    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
  import { magazineList, magazineListDiyHtml } from '@/api/shop/index'
  import { openPage,mpShare } from '@/utils/utils'
  import diyTpl from '@/components/diyTpl/index'
  import editor from '@/components/diyTpl/decoration/editor/index'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
  
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    components: {
      diyTpl,
      editor,
      SmallLogin
    },
    data() {
      return {
        defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
        keyword: '',
        magazineListId: null,
        resData: {},
        description: '',
        magazineListInit: [],
        magazineList: [],
        magazineListDiy: null,
        list: {
          finished: false,
          loading: false,
          error: false,
          p: 2
        },
        diyList: {
          loading: false,
          finished: false,
          error: false,
          p: 2
        }
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      },
      init(type) {
        this.magazineList = []
        magazineList({ id: this.magazineListId, p: 1, search_title: this.keyword }).then(res => {
          if (res.status == 1) {
            const resData = res.data
            if (type == 'search') {
              this.magazineList = resData.list
            } else {
              this.resData = resData
              this.magazineList = resData.list
              this.magazineListInit = resData.list
            }
          } else {
            // TODO 返回链接则进行跳转
            if (res.data && res.data.redirect_url) {
              openPage(res.data.redirect_url, 1)
            } else {
              res.msg ? this.$Error(res.msg) : ''
            }
          }
        })
      },
      // 专题列表加载更多
      onLoad() {
        magazineList({ id: this.magazineListId, p: this.list.p, search_title: this.keyword }).then(res => {
          if (res.status == 1) {
            this.list.loading = false
            const resData = res.data
            if (resData.list && resData.list.length > 0) {
              this.magazineList.push(...resData.list)
              this.list.p++
            } else {
              this.list.finished = true
            }
          }
        })
      },
      // diy数据
      getDiy() {
        magazineListDiyHtml({ id: this.magazineListId, p: 1 }).then(res => {
          if (res.status == 1) {
            const resData = res.data
            this.description = resData.description
            if (resData._diyHtml && resData._diyHtml.length > 0) {
              this.magazineListDiy = resData._diyHtml

              // 分享给朋友
              const option = {
                title: resData.jsapi_title,
                // imgUrl: resData.jsapi_img,
                shareParam: res.data.jsapi_url.split('?')[1]
              }
              mpShare (true, true, '/goods/pages/magazineLists/index', option)
              // TODO 小程序设置标题
                wx.setNavigationBarTitle({
                  title: resData.page_title
                })
            } else {
              this.diyList.finished = true
            }
          }
        })
      },
      // 装修数据加载更多
      onLoadDiy() {
        magazineListDiyHtml({ id: this.magazineListId, p: this.diyList.p }).then(res => {
          if (res.status == 1) {
            this.diyList.loading = false
            const resData = res.data
            if (resData._diyHtml && resData._diyHtml.length > 0) {
              this.magazineListDiy.push(... resData._diyHtml)
              this.diyList.p++
            } else {
              this.diyList.finished = true
            }
          }
        })
      },
      // 搜索
      searchList() {
        this.init('search')
      }
    },
    created() {
      this.magazineListId = this.$route.query.id
      this.init()
      this.getDiy()
    },
    mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.onLoadDiy()
      })

      window.addEventListener('wxshow', () => {
				small.HandleShareParams()
				if (!small.checkLogin()) {
					this.$refs.smalllogin.openSmallLoginPop()
				}
			})
			window.$$subscribe('loginReload', reload => {
        if (reload) {
          this.magazineListId = this.$route.query.id
          this.init()
          this.getDiy()
        }
			})
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
.magazine-lists-container{
  margin:0 20px;
  .magazine-lists{
    margin-bottom:30px;
  }
  .search-container{
    padding:30px 0;
  }
  .search-wrapper{
    position:relative;
    width: 100%;
    height: 72px;
    line-height: 72px;
    border-radius: 72px;
    font-size: 0;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    .icon {
      /* position:absolute;
      left:28px;
      color:#999999;
      font-size: 32px;
      margin-right: 10px; */

      position: absolute;
      line-height: 72px;
      left: 28px;
      top:0;
      color: #999999;
      font-size: 28px;
      margin-right: 10px;
      &.miniprogram {
        line-height: initial;
        top:20px;
      }
      .icon_search, .img_search{
        width:28px;
        height:28px;
      }
    }
    @include placeColor(#999);
    input {
      display: inline-block;
      width:100%;
      line-height: 40px;
      height: 40px;
      font-size: 28px;
      // margin-top: 13px;
      padding:0 70px;
      border:0;
      background: transparent;
    }
  }
  .special-list{
    width: 100%;
    overflow: hidden;
    border-top: #ededed solid 2px;
    background-color: #fff;
    .list-item{
      position: relative;
      border: 2px solid #ededed;
      border-top: 0;
      height: 160px;
      line-height: 160px;
      overflow: hidden;
      padding: 30px 0;
      img{
        display:block;
        float: left;
        width: 100px;
        height: 100px;
        margin-left:10px;
        border: 0;
      }
      .title{
        padding-left: 20px;
        display: inline-block;
        font-size: 32px;
        color: #000;
        height: 100px;
        line-height:100px;
        width: calc(100% - 150px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .list-empty{
    height:160px;
    line-height:160px;
    border: 2px solid #ededed;
    text-align: center;
    font-size: 32px;
    color:#000;
    background:#fff;
  }
}
</style>
